<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>克隆地球【CEarth】</title>
		<link rel="stylesheet" href="assets/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/index.css">
		<script src="./assets/plugins/jquery/jquery-2.1.4.min.js"></script>
		<script src="./assets/plugins/bootstrap/bootstrap.min.js"></script>
		<style>
			body {
				position: relative;
			}

			ul,
			li {
				list-style-type: none;
			}

			a {
				color: #FFFFFF;
				text-decoration: none;
			}

			a:hover {
				color: #f60;
				background: linear-gradient(to right, #00733E, #00733E 1.5%, transparent 1.5%);
				text-decoration: underline;
			}

			.menu {
				overflow: hidden;
				border-color: transparent;
				border-style: solid;
				border-width: 0 1px 1px;
			}

			.menu li.level1 a {
				display: block;
				height: 45px;
				line-height: 45px;
				background: transparent;
				font-weight: 400;
				color: #F3F7F9;
				text-indent: 14px;
				position: relative;
			}

			.menu li.level1 a:hover {
				text-decoration: none;
			}

			.menu li.level1 a.current {
				background: transparent;
			}

			.menu li ul {
				overflow: hidden;
			}

			.menu li ul.level2 {
				display: none;
			}

			.menu li ul.level2 li a {
				display: block;
				height: 45px;
				line-height: 45px;
				font-weight: 400;
				color: #F3F7F9;
				text-indent: 18px;
				overflow: hidden;
			}

			.menu li ul.level2 li a:hover {
				color: #f60;
				background: linear-gradient(to right, #00733E, #00733E 1.5%, transparent 1.5%);
			}

			.menu li.level1.active {
				/* background-color: #00733E; */
				background: linear-gradient(to right, #f60, #f60 1.5%, transparent 1.5%);
			}

			.menu li.level1.active a.current {
				/* background-color: #00733E; */
				/* background: linear-gradient(to bottom right, #f60,#f60 5%,transparent 5%) !important; */
				/* background-color: transparent; */
			}

			.menu li.level1.active a.current {
				background-color: transparent;
			}

			.menu li.level1.active ul.level2 {
				background-color: #24262E !important;
			}

			.menu li.level1.active ul.level2 li.active {
				background-color: #00733E;
				/* background: linear-gradient(to right, #00733E, #00733E 1.5%, transparent 1.5%); */
			}

			.menu li.level1 a {
				position: relative;
			}

			.menu li.level1 .expand {
				position: absolute;
				width: 30px;
				height: 30px;
				top: 6px;
				right: 47px;
			}

			.menu li.level1.active .expand {
				display: none;
			}

			.menu li.level1 .flod {
				display: none;
			}

			.menu li.level1.active .flod {
				display: block;
				position: absolute;
				width: 14px;
				height: 14px;
				top: 15px;
				right: 56px;
			}

			.menu li.level1 .level2.nav {
				display: none !important;
			}

			.menu li.level1.active .level2.nav {
				display: block !important;
			}
		</style>
	</head>
	<body data-spy="scroll" data-target="#navbar" data-offset="80">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo layui-hide-xs layui-bg-black">CEarth</div>
			</div>
			<div class="layui-side layui-bg-black">
				<nav id="navbar" class="layui-side-scroll">
					<ul class="menu nav">
						<li class="level1">
							<a href="#scene">场景管理
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#start-scene-create">初始化场景</a></li>
								<li><a href="#scene-background">设置背景</a></li>
								<li><a href="#scene-lighting">设置灯光</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#terrain">三维地形
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#terrain-layer">地形图层</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#tile">瓦片图层
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#tile-online">在线地图服务</a></li>
								<li><a href="#tile-standard-server">标准瓦片服务</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#model">三维模型
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#model-3dtiles">3DTiles三维模型</a></li>
								<li><a href="#model-standard-server">三维模型单体化</a></li>
								<li><a href="#model-glb">gLTF小模型</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#vector">矢量图层
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#vector-point">点</a></li>
								<li><a href="#vector-polyline">多线段</a></li>
								<li><a href="#vector-polygon">多边形</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#weather">天气系统
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png">
							</a>
							<ul class="level2 nav">
								<li><a href="#weather-date">日期时间</a></li>
								<li><a href="#weather-rain">下雨效果</a></li>
								<li><a href="#weather-fog">雾气效果</a></li>
								<li><a href="#weather-cloud">云层效果</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#particle">粒子系统
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png"></a>
							<ul class="level2 nav">
								<li><a href="#particle-fire">火</a></li>
								<li><a href="#particle-water">水</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#video">视频图层
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png"></a>
							<ul class="level2 nav">
								<li><a href="#video-project">视频投射</a></li>
								<li><a href="#video-model">视频模型</a></li>
								<li><a href="#video-launch">视频投放</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#event">事件管理
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png"></a>
							<ul class="level2 nav">
								<li><a href="#event-mouse">鼠标事件</a></li>
								<li><a href="#event-keyboard">键盘事件</a></li>
								<li><a href="#event-map">地图事件</a></li>
							</ul>
						</li>
						<li class="level1">
							<a href="#tools">工具
								<img class="expand" src="../examples/assets/img/expand.png">
								<img class="flod" src="../examples/assets/img/flod.png"></a>
							<ul class="level2 nav">
								<li><a href="#tools-graphics">绘图工具</a></li>
								<li><a href="#tools-measure">测量工具</a></li>
							</ul>
						</li>
						<div style="clear: both;"></div>
					</ul>
				</nav>
			</div>
			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;">
					<fieldset class="layui-elem-field layui-field-title">
						<legend id="scene">场景管理</legend>
					</fieldset>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="start-scene-create">初始化场景</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#create')">
										<img src="../examples/assets/img/a10_createMap.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>地球</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#1')">
										<img src="../examples/assets/img/a10_createMap.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>效果</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend id="terrain">三维地形</legend>
					</fieldset>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="terrain-layer">地形图层</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#terrainLayerServer')">
										<img src="../examples/assets/img/b10_terrain.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>地形服务</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div id="tile">
					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend>瓦片图层</legend>
					</fieldset>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="tile-online">在线地图服务</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#tdt')">
										<img src="../examples/assets/img/c10_tdt.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>天地图</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#amap')">
										<img src="../examples/assets/img/c10_gaode.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>高德</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#baidu')">
										<img src="../examples/assets/img/c10_baidu.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>百度</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#osm')">
										<img src="../examples/assets/img/c10_osm.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>OpenStreetMap（OSM）</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#bing')">
										<img src="../examples/assets/img/c10_bing.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>微软Bing</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#ion')">
										<img src="../examples/assets/img/c10_ion.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>Cesium Ion服务</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="tile-standard-server">标准瓦片服务</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#image')">
										<img src="../examples/assets/img/c15_image.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>本地单张图片</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#xyz')">
										<img src="../examples/assets/img/c15_xyz.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>xyz金字塔瓦片</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend id="model">三维模型</legend>
					</fieldset>
					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="model-3dtiles">3DTiles三维模型</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#tile3d-qxsy')">
										<img src="../examples/assets/img/e15_tilesetLayer_shequ.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>倾斜摄影</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim')">
										<img src="../examples/assets/img/g10_bim_shinei.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>教学楼(BIM建模)</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim-hgc')">
										<img src="../examples/assets/img/e15_tilesetLayer_shihua.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>石化厂（人工建模）</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim-bm')">
										<img src="../examples/assets/img/k20_jzwStyle.gif"
											style="width: 100%;height:auto;" />
										<div>
											<p>合肥市区（城市白模）</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim-dxgw')">
										<img src="../examples/assets/img/g10_piping.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>地下管网（人工建模）</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="model-standard-server">三维模型单体化</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#tile3d-qxsy')">
										<img src="../examples/assets/img/g15_dth_classificationType.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>3dtiles单体化(叠加ClassificationType)</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim')">
										<img src="../examples/assets/img/g15_dth_inside.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>3dtiles数据内单体化(建筑物或人工建)</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="model-glb">gLTF小模型</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#glb')">
										<img src="../examples/assets/img/f10_entity_model.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>glb(创建)</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#tile3d-bim')">
										<img src="../examples/assets/img/g15_dth_inside.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>glb(编辑)</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
						<legend id="vector">矢量图层</legend>
					</fieldset>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="vector-point">矢量点</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#merge')">
										<img src="../examples/assets/img/f10_entity_fontBillboard.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>点图层</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#label')">
										<img src="../examples/assets/img/f10_entity_label.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>点图层样式</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="vector-polyline">矢量多线段</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#polyline')">
										<img src="../examples/assets/img/f15_entity_polyline.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>Polyline 图层</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#polyline')">
										<img src="../examples/assets/img/f15_entity_polyline.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>Polyline 样式</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

					<div class="layui-row">
						<div class="layui-card">
							<div class="layui-card-header">
								<h3 id="vector-polygon">矢量多边形</h3>
							</div>
							<div class="layui-card-body">
								<ul class="card-ul">
									<li onclick="javascript:window.open('views/editor.html#polygon')">
										<img src="../examples/assets/img/f15_entity_polygon.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>Polygon 面</p>
										</div>
									</li>
									<li onclick="javascript:window.open('views/editor.html#polygon')">
										<img src="../examples/assets/img/f15_entity_polygon.jpg"
											style="width: 100%;height:auto;" />
										<div>
											<p>Polygon 样式</p>
										</div>
									</li>
									<div style="clear: both;"></div>
								</ul>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>


		<script src="../examples/assets/plugins/layui/layui.js"></script>
		<script>
			//JS 
			layui.use(['element', 'layer', 'util'], function() {
				var element = layui.element,
					layer = layui.layer,
					util = layui.util,
					$ = layui.$;

				//头部事件
				util.event('lay-header-event', {
					//左侧菜单事件
					menuLeft: function(othis) {
						layer.msg('展开左侧菜单的操作', {
							icon: 0
						});
					},
					menuRight: function() {
						layer.open({
							type: 1,
							content: '<div style="padding: -10px;">处理右侧面板的操作</div>',
							area: ['260px', '100%'],
							offset: 'rt', //右上角,
							anim: 5,
							shadeClose: true
						});
					}
				});

			});
			$(document).ready(function() {
				$(".level1 > a").click(function() {
					var className = ($(this).parent().prop("class"))
					var index = className.indexOf("active")
					if (index > -1) {
						$(this).parent().removeClass("active");
						$(this).next().hide();
					} else {
						$(this).parent().addClass("active");
						$(this).next().show();
					}
				});
			});
		</script>
	</body>
</html>
